<template>
  <svg :style="{ width, height, transform: `scale(${scale})}` }">
    <use :xlink:href="prifix + name" :fill="color"></use>
  </svg>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
const scale = ref(1);
const adjustScale = () => {
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;
  scale.value = Math.min(screenWidth / 1920, screenHeight / 980) * 0.8;
  // const screenW = window.screen.width;
  // if(screenW>=3840){
  //   scale.value = scale.value*0.1
  // }
  // console.log('scale.value',scale.value)
};

onMounted(() => {
  window.addEventListener('resize', adjustScale);
  adjustScale();
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', adjustScale);
});

defineProps({
  prifix: {
    type: String,
    default: "#icon-",
  },
  name: String,
  color: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '16px'
  },
  height: {
    type: String,
    default: '16px'
  }
})
onMounted(() => {
  // svgColor
})
</script>

<style scoped lang="scss">
// .svg-icon{
//   fill: currentColor !important;
// }
@media screen and (min-width: 3840px) {
  svg{
    transform: scale(1.6);
  }
}
</style>